Description

Fixes Issue #75 - Handle touchcancel to prevent stuck drag or pressed input state

Implemented comprehensive touchcancel handling to ensure gesture state is properly cleaned up when touch sequences are interrupted by OS or browser events.

Problem

The gesture tracking system handles touchstart, touchmove, and touchend events, but did not handle touchcancel. On mobile devices, touch sequences can be interrupted and end with touchcancel instead of touchend in scenarios such as:

• OS notifications appearing
• Incoming calls or system overlays
• System gestures (home/back swipe, app switch)
• Browser taking control for scrolling or zooming
• Loss of window focus

When touchcancel occurred without proper handling:

• Drag state remained active (stuck dragging)
• Mouse press remained held
• Gesture tracking stayed in inconsistent state
• User experienced broken input until manually reset

Solution

Added handleTouchCancel function that performs comprehensive cleanup:

1. Touch Tracking Cleanup

• Removes all cancelled touches from ongoingTouches map
• Prevents ghost touches from affecting future gestures

2. Drag State Management

• Clears draggingTimeout to prevent spurious click events
• Releases active drag state if present
• Sends button release event to ensure clean state on remote

3. Gesture State Reset

When all touches are cancelled:

• Sets isTracking to false
• Resets moved flag
• Clears released count
• Resets pinch tracking (lastPinchDist, pinching)

When some touches remain but less than 2:

• Only resets pinch-specific state
• Allows remaining touches to continue normal tracking

Changes

src/hooks/useTrackpadGesture.ts

• Added handleTouchCancel function (+39 lines)
• Comprehensive state cleanup with detailed comments
• Added onTouchCancel to handlers return object

src/components/Trackpad/TouchArea.tsx

• Updated TouchAreaProps interface to include onTouchCancel
• Wired up onTouchCancel event handler in touch area div

src/components/Trackpad/ScreenMirror.tsx

• No changes needed - automatically receives handler via spread operator

Testing Scenarios

This fix handles:

• Notification interrupts during drag
• System gesture interrupts (home, back, app switch)
• Browser scroll/zoom takeover
• Window focus loss
• Multi-touch to single-touch transitions
• Complete touch cancellation

Technical Details

The implementation follows the same pattern as handleTouchEnd but with more aggressive cleanup since touchcancel indicates an abnormal termination. Unlike touchend, we do not attempt to interpret the gesture as a tap/click - we simply ensure all state is safely reset.

Impact

Significantly improves mobile UX reliability by:

• Eliminating stuck drag states
• Preventing phantom button presses
• Ensuring clean gesture reset after interruptions
• Making touch interactions more robust and predictable

Related Issues

Closes #75

Notes

This PR builds on PR #323 which added cleanup for draggingTimeout on unmount. Together, these changes ensure comprehensive lifecycle management for gesture state.